<template>
  <div class="content-list-container">
    <el-row class="row">
      <el-col :span="18">
        <div class="content-filter">
          共找到 <span style="color: #415fff;">{{total}}</span> 门<span style="color: #415fff;">"{{param.keyword}}"</span>相关内容
        </div>
        <el-empty style="background: #fff;border-radius: 4px;" v-if="!(itemList && itemList.length)"/>
        <div v-else class="content-list">
          <div class="favorites-card" v-for="item in itemList" :key="item.id">
            <router-link target="_blank" :to="{path: '/learn/detail', query: {id: item.id}}" class="favorites-cover">
              <img :src="item.image" :alt="item.name">
              <!--                <div class="duration">00:31</div>-->
              <div class="tag-wrapper"></div>
            </router-link>
            <div class="favorites-meta">
              <div class="meta-title">
                <router-link target="_blank" :to="{path: '/learn/detail', query: {id: item.id}}" class="name ellipsis">
                  {{item.name}}
                </router-link>
              </div>
              <div class="meta-status">
                <div>
                  <span class="pubdate is-success">{{item.createTime}}</span>
                </div>
              </div>
              <div class="meta-view">
              </div>
              <div class="meta-footer">
                <div title="播放" class="view-stat">
                  <i class="el-icon-video-play"></i>
                  <span class="icon-text click-text">{{item.learnNum || 0}}</span>
                </div>
                <div title="评论" class="view-stat">
                  <i class="el-icon-chat-line-round"></i>
                  <span class="icon-text">{{item.commentNum || 0}}</span>
                </div>
                <div title="收藏" class="view-stat">
                  <i class="el-icon-star-off"></i>
                  <span class="icon-text">{{item.favoriteNum || 0}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <page class="page-bar" :total="total" @size-change="sizeChange" @current-change="currentChange" :current-page="param.current" :page-size="param.size"/>
      </el-col>
      <el-col :span="6">
        <div class="hot-search">
          <h5 class="title">热门搜索</h5>
          <div class="hot-list">
            <div v-for="(item, index) in hotSearchList" :key="index">
              <span class="order" :style="'background-color: ' + colorList[index] + ';'">{{index + 1}}</span>
              <router-link target="_blank" class="hot-item" :to="{path:'/learn/detail', query:{id: item.id}}">
                <span class="hot-word">{{item.name}}</span>
              </router-link>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {ref, watch} from "vue"
  import {getLessonList} from "../../api/learn/lesson"
  import Page from "../../components/Page/index";
  import {useRoute} from "vue-router";
  export default {
    name: "searchList",
    components: {Page},
    setup() {
      const itemList = ref([])
      const colorList = ["#ff0000", "rgb(46 169 46)", "#415fff"]
      const hotSearchList = [
        {
          name: "Zookeeper原理剖析",
          id: 14
        },
        {
          name: "JVM结构",
          id: 14
        },
        {
          name: "HashMap分析",
          id: 14
        },
        {
          name: "concurrentHashMap分析",
          id: 14
        }
      ]
      const param = ref({
        keyword: "",
        current: 1,
        size: 10
      })
      const total = ref(0)
      const load = function() {
        getLessonList(param.value, res => {
          console.log(res)
          itemList.value = res.list
          total.value = res.total
        })
      }
      const sizeChange = function(val) {
        param.value.size = val;
        load();
      }
      const currentChange = function(val) {
        param.value.current = val;
        load();
      }
      const route = useRoute()
      watch(() => route.query.keyword, () => {
        window.location.reload();
      })
      param.value.keyword = route.query.keyword
      load()
      return {
        itemList,
        colorList,
        hotSearchList,
        param,
        total,
        sizeChange,
        currentChange
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-list-container {
    margin: 20px;
    .content-filter {
      width: 100%;
      margin-bottom: 20px;
    }
    .content-list {
      background-color: #FFFFFF;
      .content-item {
        margin: 0 0 20px 0;;
      }
    }
    .page-bar {
      margin: 20px 0;
    }
    .favorites-card {
      border-bottom: 1px solid #e7e7e7;
      position: relative;
      min-height: 100px;
      border-radius: 4px;
      background: #fff;
      padding: 24px;
      margin-bottom: 0;
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
      .favorites-cover {
        position: relative;
        float: left;
        border-radius: 4px;
        overflow: hidden;
        width: 154px;
        height: 96px;
        margin-right: 24px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
          border-style: none;
        }
        .duration {
          position: absolute;
          bottom: 0;
          right: 0;
          height: 20px;
          line-height: 20px;
          padding: 0 4px;
          color: #fff;
          background: rgba(0,0,0,.5);
          border-radius: 4px 0 4px 0;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
        .tag {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
          -webkit-flex-direction: row-reverse;
          -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
          top: 4px;
          right: 4px;
          position: absolute;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-title {
        height: 24px;
        line-height: 24px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        a {
          text-decoration: none;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          max-width: 420px;
          font-size: 16px;
          color: #212121;
          line-height: 20px;
          vertical-align: middle;
        }
      }
      .meta-status {
        padding: 16px 0 20px 0;
        font-size: 14px;
        color: #505050;
        line-height: 16px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .pubdate {
          display: inline-block;
          font-weight: 400;
          vertical-align: middle;
          font-size: 14px;
          line-height: 16px;
          padding-right: 24px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-view {
        position: absolute;
        top: 50%;
        margin-top: -16px;
        color: #99a2aa;
        right: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .bili-btn {
          display: inline-block;
          text-align: center;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          width: 84px;
          height: 32px;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          border: 1px solid #e7e7e7;
          border-radius: 2px;
          font-size: 14px;
          color: #505050;
          line-height: 18px;
          padding: 0;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          margin-right: 12px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
        }
      }
      .meta-footer {
        position: relative;
        font-size: 16px;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
        .view-stat {
          display: inline-block;
          float: left;
          color: #99a2aa;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          margin-right: 25px;
          -webkit-box-sizing: inherit;
          box-sizing: inherit;
          .icon-text {
            vertical-align: top;
            margin-left: 5px;
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
          }
        }
      }
      .favorites-meta {
        float: left;
        -webkit-box-sizing: inherit;
        box-sizing: inherit;

      }
    }
    .favorites-card:last-child {
      border-bottom: 0;
    }
    .hot-search {
      margin: 43px 0 0 20px;
      .title {
        color: #000;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .hot-item {
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        color: #000;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        text-decoration: none;
        margin: 10px 0;
        cursor: pointer;
        display: inline-flex;
        .hot-word {
          overflow: hidden;
          width: 100%;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .order {
        width: 20px;
        text-align: center;
        margin-right: 10px;
        color: #fff;
        padding: 0 6px;
        border-radius: 4px;
        background: #999999;
      }
    }
  }
  a:hover {
    color: #415fff!important;
  }
</style>
<style lang="scss">
  body{
    background-color: #f5f5f5!important;
  }
</style>
